<template>
    <div class="content">
        <el-form class="form">
            <el-form-item label-width="0px">
                <el-button size="mini" type="primary" @click="handleBtn('config')">
                    分工配置
                </el-button>
            </el-form-item>
            <el-form-item label="产品类型">
                <el-select v-model="searchParams.fundType" size="mini" class="item" filterable clearable>
                    <el-option v-for="(value, key) in fundTypeOptions" :key="key" :value="key" :label="value"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="待办人">
                <el-select v-model="searchParams.sponsor" size="mini" class="item" clearable filterable>
                    <el-option v-for="item in userOptions" :key="item.userCode" :value="item.userCode" :label="item.userName"></el-option>
                </el-select>
                <!-- <el-input v-model="searchParams.sponsor" size="mini" class="item" clearable> </el-input> -->
            </el-form-item>
            <el-form-item label-width="0px">
                <el-button size="mini" type="primary" @click="getTableData">查询</el-button>
            </el-form-item>
        </el-form>
        <RiskTableP
            ref="risk-table"
            :tableConfig="tableConfig"
            :tableData="tableData"
            :column="tableColumns"
            v-loading="tableLoading"
            style="height:calc(100% - 60px)"
        >
        </RiskTableP>
        <yh-dialog drag title="配置分发维护" :visible.sync="configVisible" :close-on-click-modal="false" :close-on-press-escape="false" width="700px">
            <el-form class="form-config" label-width="110px">
                <el-form-item label="产品类型:">
                    <el-select
                        v-model="configParam.fundType"
                        size="mini"
                        class="item"
                        placeholder="下拉选择,支持多选"
                        clearable
                        multiple
                        collapse-tags
                    >
                        <el-option v-for="(value, key) in fundTypeOptions" :key="key" :value="key" :label="value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item> </el-form-item>
                <el-form-item label="主办环节1:">
                    <el-select v-model="configParam.session1" size="mini" disabled>
                        <el-option v-for="(value, key) in taskTypeOptions" :key="key" :value="key" :label="value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="主办人:">
                    <el-select v-model="configParam.organizer1" size="mini" class="item" clearable filterable>
                        <el-option v-for="item in userOptions" :key="item.userCode" :value="item.userCode" :label="item.userName"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="主办环节2:">
                    <el-select v-model="configParam.session2" size="mini" disabled>
                        <el-option v-for="(value, key) in taskTypeOptions" :key="key" :value="key" :label="value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="主办人:">
                    <el-select v-model="configParam.organizer2" size="mini" class="item" clearable filterable>
                        <el-option v-for="item in userOptions" :key="item.userCode" :value="item.userCode" :label="item.userName"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="主办环节3:">
                    <el-select v-model="configParam.session3" size="mini" disabled>
                        <el-option v-for="(value, key) in taskTypeOptions" :key="key" :value="key" :label="value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="主办人:">
                    <!-- TODO -->
                    <el-select v-model="configParam.organizer3" size="mini" class="item" clearable filterable>
                        <el-option v-for="item in userOptions" :key="item.userCode" :value="item.userCode" :label="item.userName"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="configVisible = false">
                    取 消
                </el-button>
                <el-button type="primary" @click="submit">
                    确 认
                </el-button>
            </div>
        </yh-dialog>
    </div>
</template>
<script lang="ts">
import RiskTableP from '@/common/components/risk-table-plus.vue';
import { TableConfigVO } from '@/common/vo';
import { dateFormat, timeFormat } from '@/utils/tools';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import * as api from '../api/fund-pending-manage';
import DictionConstUtil from '../dict';

// 用户分工配置
@Component({ name: 'TaskDivisionManage', components: { RiskTableP } })
export default class TaskDivisionManage extends Vue {
    // 查询参数
    searchParams: any = {
        fundType: '',
        sponsor: '',
    };
    // 分发配置参数
    configParam: any = {
        fundType: [],
        session1: '1',
        organizer1: '',
        session2: '2',
        organizer2: '',
        session3: '3',
        organizer3: '',
    };

    userOptions: any = [{ userCode: '', userName: '' }];
    tableLoading: boolean = true;
    tableConfig: TableConfigVO = {
        rowKey: 'serialNo', // 主键key TODO
        allRowKeys: [], // 所有页数据的key集合
    };
    tableData: any[] = [];
    tableColumns = [
        // {
        //     type: 'checkbox',
        //     selectedAll: false,
        //     fixed: 'left',
        //     align: 'center',
        //     width: 60,
        // },
        {
            title: '待办类型',
            field: 'todoType',
            minWidth: 130,
            align: 'center',
            render: value => this.taskTypeOptions[value],
        },
        {
            title: '产品类型',
            field: 'fundType',
            minWidth: 130,
            render: value => value.join(','),
            // render: value => {
            //     if (value) {
            //         const arr = value.split(',');
            //         return arr.map(key => this.fundTypeOptions[key]).join(',');
            //     } else {
            //         return '--';
            //     }
            // },
            align: 'center',
        },
        {
            title: '待办人',
            field: 'sponsor',
            minWidth: 130,
            align: 'center',
        },
        {
            title: '设置人',
            field: 'setter',
            filterType: 'search',
            minWidth: 130,
            align: 'center',
        },
        {
            title: '设置日期',
            field: 'dtMdDate',
            minWidth: 250,
            render: (value, row) => dateFormat(value) + ' ' + timeFormat(row.dtMdTime),
            align: 'center',
        },
    ];
    configVisible: boolean = false; // 配置框显示

    taskTypeOptions = DictionConstUtil.taskTypeOptions;

    fundTypeOptions = DictionConstUtil.fundTypeOptions;

    statusOptions = DictionConstUtil.statusOptions;
    @Prop() activeValue: string;
    isFirst: boolean = true;
    @Watch('activeValue', { immediate: true })
    handleActiveValue() {
        if (this.activeValue === 'task-division-manage') {
            if (this.isFirst) {
                this.isFirst = false;
                this.getTableData();
                this.getUser();
            }
        }
    }

    // 配置"确认"
    submit() {
        if (!this.configParam.organizer1 && !this.configParam.organizer2 && !this.configParam.organizer3) {
            this.yh_message_error('必须填写一个主办人！');
            return;
        }

        api.taskSettingUpdate(this.configParam)
            .then((res: any) => {
                this.yh_message_success('配置成功');
                this.getTableData();
            })
            .finally(() => {
                this.configVisible = false;
            });
    }

    // 按钮操作
    handleBtn(type: string) {
        if (type == 'config') {
            this.configVisible = true;
            this.configParam = {
                fundType: [],
                session1: '1',
                organizer1: '',
                session2: '2',
                organizer2: '',
                session3: '3',
                organizer3: '',
            };
            // TODO  调用接口获取以及保存
        }
    }

    // 表格数据
    getTableData() {
        this.tableLoading = true;
        // TODO 是否需要分页  paging: this.paging
        api.taskSetting({ ...this.searchParams })
            .then((res: any) => {
                this.tableData = res || [];
            })
            .catch(err => {
                console.log(err, 'taskSetting');
            })
            .finally(() => {
                this.tableLoading = false;
            });
    }

    // 主办人下拉数据
    getUser() {
        api.settingUser()
            .then((res: any) => {
                this.userOptions = res || [];
            })
            .catch(err => {
                console.log(err, 'settingUser');
            });
    }
}
</script>
<style lang="scss" scoped>
.content {
    padding: 10px;
    .form {
        display: grid;
        grid-template-columns: 1.8fr repeat(4, 3fr) 6fr;
        border: 1px solid #ccc;
        padding: 8px;
        margin-bottom: 10px;
        .el-form-item {
            margin-bottom: 0px;
        }
        .item {
            width: 60%;
        }
    }

    .form-config {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        .el-form-item {
            margin-bottom: 10px;
            &:first-child {
                margin-bottom: 20px;
            }
        }
        .item {
            width: 100%;
        }
    }
}

.dialog-footer {
    text-align: right;
    margin-right: 20px;
}
</style>
